<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preserveAspectRatio_show</title>
<script type="text/javascript">
var show = function() {
	var svg = document.getElementsByTagName("svg")[0];
	var alignXStr = document.getElementById("alignX").value;
	var alignYStr = document.getElementById("alignY").value;
	var radioStr = document.getElementById("radio").value;

    if (radioStr == "none") {
        svg.setAttribute("preserveAspectRatio", radioStr);
    } else if (svg && alignXStr && alignYStr && radioStr) {
	    svg.setAttribute("preserveAspectRatio", alignXStr + alignYStr + " " + radioStr);
	} else {
        svg.removeAttribute("preserveAspectRatio");
    };
};
</script>
</head>
<body>
<svg width="800" height="400" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="border:1px solid #ff0000;" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="100" fill="#abcdef" />
</svg>
<div>
    <label>X轴方向：</label>
    <select id="alignX" onchange="show()">
        <option value="xMin">xMin</option>
        <option value="xMid">xMid</option>
        <option value="xMax">xMax</option>
    </select>
</div>
<div>
    <label>Y轴方向：</label>
    <select id="alignY" onchange="show()">
        <option value="YMin">YMin</option>
        <option value="YMid">YMid</option>
        <option value="YMax">YMax</option>
    </select>
</div>
<div>
    <label>纵横比例：</label>
    <select id="radio" onchange="show()">
        <option value="meet">meet</option>
        <option value="slice">slice</option>
        <option value="none">none</option>
        <option value="">无preserveAspectRatio属性</option>
    </select>
</div>
</body>
</html>
